<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="../../template/tagedu.xhtml">

    <ui:define name="title">
        <title><h:outputText value="TAG - Frequência Simples"/></title>
    </ui:define>
    
    <ui:define name="content">
        <h:outputText styleClass="organizationName" value="Frequência de #{frequencyMB.organization.name}"/>
        
        <h:form id="frequencyMBForm">
            <p:message for="frequencyMBForm" id="messages"/>
            
            <div class="input-list">
                <h:outputLabel for="year" value="Ano: " class="label"/>
                <p:spinner id="year" value="#{frequencyMB.year}" size="4"
                           min="#{frequencyMB.actualYear - 1}" max="#{frequencyMB.actualYear}">
                    <f:validator validatorId="yearV"/>
                    <f:attribute name="minimo" value="#{(frequencyMB.actualYear - 1).toString()}"/>
                    <f:attribute name="maximo" value="#{(frequencyMB.actualYear).toString()}"/>
                    <p:ajax process="@this" listener="#{frequencyMB.loadUnities()}" update="unityBox, monthYear"/>
                </p:spinner>
            </div>
            <h:panelGroup id="unityBox" layout="block" class="input-list">
                <h:outputLabel for="unity" value="Unidade:" class="label"/>
                <p:selectOneMenu id="unity" value="#{frequencyMB.unity}" converter="unityC">
                    <f:selectItem value="#{null}" itemLabel="Selecione uma unidade"/>
                    <f:selectItems value="#{frequencyMB.unityList}" var="u" itemLabel="#{u.name}" itemValue="#{u}"/>
                    <p:ajax process="@this" update="monthYear"/>
                </p:selectOneMenu>
            </h:panelGroup>
            
            <h:panelGroup id="monthYear" class="lazy-input">
                <h:panelGroup layout="block" class="input-list" rendered="#{frequencyMB.unity != null}">
                    <h:outputLabel for="month" value="Mês: " class="label"/>
                    <p:selectOneMenu id="month" value="#{frequencyMB.month}" height="250"
                                     required="true" requiredMessage="Selecione o mês desejado">
                        <f:selectItems value="#{frequencyMB.months}" var="m" itemLabel="#{m.toString()}" itemValue="#{m}"/>
                    </p:selectOneMenu>
                </h:panelGroup>
                <h:panelGroup layout="block" class="input-list" rendered="#{frequencyMB.unity != null}">
                    <h:outputLabel for="discipline" value="Disciplina: " class="label"/>
                    <p:selectOneMenu id="discipline" value="#{frequencyMB.discipline}"
                                     converter="disciplineC">
                        <f:selectItem itemLabel="Ausência diária" itemValue="#{null}"/>
                        <f:selectItems value="#{frequencyMB.disciplines}" var="d" itemLabel="#{d.name}" itemValue="#{d}"/>
                    </p:selectOneMenu>
                </h:panelGroup>
                <p:commandButton value="Carregar" action="#{frequencyMB.loadTable()}" oncomplete="tableFinalize()"
                                 update=":tableGroupForm :replacementF" rendered="#{frequencyMB.unity != null}">
                </p:commandButton>
            </h:panelGroup>
        </h:form>
        <div style="clear:both"></div>
        <br/>
        <h:form id="tableGroupForm">
            <h:outputText value="Não possui frequência para este filtro" rendered="#{not frequencyMB.loadedTable}"></h:outputText>
            <h:panelGroup id="tableGroup" rendered="#{frequencyMB.loadedTable and not empty frequencyMB.matriculated.actors and not empty frequencyMB.dayList}">
                <h:outputText value="* - Assinalar um item marca uma falta"/>
                <table style="border-width: 1px; border-style: outset; border-color: gray;
                       border-spacing: 0px; border-collapse: collapse; background-color: white">

                    <tr>
                        <th style="border-width: 1px; border-color: gray; border-style: outset;
                            padding: 1px; background-color: lightgray">
                            <h:outputText value="Nome"/>
                        </th>
                        <ui:repeat var="day" value="#{frequencyMB.matriculated.days}">
                            <th style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px;
                                background-color: lightgray" class="day">
                                <center>
                                    <h:outputText value="#{day}">
                                        <f:convertDateTime pattern="dd"/>
                                    </h:outputText>
                                </center>
                            </th>
                        </ui:repeat>
                    </tr>

                    <ui:repeat value="#{frequencyMB.allocated.actors}" varStatus="x" var="allocated">
                        <tr onmouseover="change_color_in(this);" onmouseout="change_color_out(this);">
                            <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px;
                                background-color: gray">
                                <h:outputText value="#{allocated.person.name}"/>
                            </td>
                            <ui:repeat value="#{frequencyMB.allocated.days}" varStatus="y" var="freq">
                                <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px">
                                    <h:selectBooleanCheckbox value="#{frequencyMB.allocated.assiduity[x.index][y.index]}"/>
                                </td>
                            </ui:repeat>
                        </tr>
                    </ui:repeat>
                    <ui:repeat value="#{frequencyMB.matriculated.actors}" varStatus="i" var="matriculated">
                        <tr onmouseover="change_color_in(this);" onmouseout="change_color_out(this);">
                            <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px">
                                <h:outputText value="#{matriculated.person.name}"/>
                            </td>
                            <ui:repeat value="#{frequencyMB.matriculated.days}" varStatus="j" var="freq">
                                <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px">
                                    <h:selectBooleanCheckbox value="#{frequencyMB.matriculated.assiduity[i.index][j.index]}"/>
                                </td>
                            </ui:repeat>
                            <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px;" class="percent">
                                <h:outputText value=" "/>
                            </td>
                        </tr>
                    </ui:repeat>
                    <tr onmouseover="change_color_in(this);" onmouseout="change_color_out(this);">
                        <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px">
                            <h:outputText value="Atividades"/>
                        </td>
                        <ui:repeat value="#{frequencyMB.dayList}" varStatus="a" var="nouse">
                            <td style="border-width: 1px; border-color: gray; border-style: outset; padding: 1px">
                                <p:commandButton update=":activityForm" icon="ui-icon-tag" title="Adicionar atividade" oncomplete="activityD.show()"
                                                 action="#{frequencyMB.prepareActivities(a.index)}"/>
                            </td>
                        </ui:repeat>
                    </tr>
                </table>
                
                <div class="buttonGroup">
                    <p:commandButton value="Salvar" process="@parent"
                                     action="#{frequencyMB.save()}"/>
                    <br/><br/>
                    <h:commandLink target="_blank" immediate="true" value="Baixar em PDF"
                                   action="#{frequencyMB.export()}"/>
                </div>
            </h:panelGroup>
        </h:form>
        <br/>
        <p:separator/>
        <h:form id="replacementF">
            <h:panelGroup rendered="#{not empty frequencyMB.replacement}">
                <p:dataTable value="#{frequencyMB.replacement}" var="frequency">
                    <f:facet name="header">
                        <h:outputText value="Reposição"/>
                    </f:facet>
                    <p:column headerText="Data da aula">
                        <h:outputText value="#{frequency.frequencyDate.time}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Data da reposição">
                        <h:outputText value="#{frequency.replacementDate.time}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Edição">
                        <p:commandButton icon="ui-icon-search" update=":replacementForm"
                                         oncomplete="replacement.show();"
                                         action="#{frequencyMB.preEditReplacement()}">
                            <f:setPropertyActionListener value="#{frequency}"
                                                         target="#{frequencyMB.simpleFrequency}"/>
                        </p:commandButton>
                    </p:column>
                </p:dataTable>
            </h:panelGroup>
        </h:form>
    </ui:define>

    <ui:define name="modals">
        <p:dialog modal="true" header="Reposição" widgetVar="replacement"
                  resizable="false" width="600" height="400">
            <h:form id="replacementForm">
                <p:messages/>
                <h:panelGrid columns="2">
                    <h:outputLabel for="frequencyDate" value="Data: "/>
                    <h:outputText id="frequencyDate" value="#{frequencyMB.simpleFrequency.frequencyDate.time}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </h:outputText>

                    <h:outputLabel for="replacementDate" value="Reposição: "/>
                    <p:calendar id="replacementDate" value="#{frequencyMB.replacementAssiduity.days[0]}"
                                 required="true" requiredMessage="'Reposição' é obrigatório"/>
                </h:panelGrid>
                <br/><br/>
                <p:dataTable rendered="#{not empty frequencyMB.replacementAssiduity}" value="#{frequencyMB.replacementAssiduity.actors}" var="actor" rowIndexVar="t">
                    <p:column headerText="Nome">
                        <h:outputText value="#{actor.person.name}"/>
                    </p:column>
                    <p:column headerText="Falta">
                        <h:selectBooleanCheckbox value="#{frequencyMB.replacementAssiduity.assiduity[t][0]}"/>
                    </p:column>
                </p:dataTable>
                <br/>
                <div class="buttonGroup">
                    <p:commandButton action="#{frequencyMB.saveReplacement()}"
                                     value="Salvar" update="@form :replacementF"
                                     oncomplete="handleSubmitRequest(xhr, status, args)"/>
                </div>
            </h:form>
        </p:dialog>
        <p:dialog modal="true" header="Atividades" widgetVar="activityD" width="500px">
            <h:form id="activityForm">
                <p:messages id="activityMsg" showDetail="true"/>
                <p:dataList value="#{frequencyMB.activities}" var="activity" itemType="disc">
                    <h:outputText value="#{activity.workTopic.code} - #{activity.workTopic.name}"/>
                    <p:commandButton action="#{frequencyMB.removeActivity(activity)}"
                                     update=":activityForm" icon="ui-icon-closethick"
                                     title="Remover atividade" process="@this"/>
                </p:dataList>
                <p:separator/>
                
                <h:outputLabel for="date" value="Data:  "/>
                <h:outputText id="date" value="#{frequencyMB.actualCalendar.time}">
                                <f:convertDateTime dateStyle="medium"  type="date"/>
                            </h:outputText><br/><br/>
                
                <h:outputLabel for="aCode" value="Código:"/>
                <p:inputText id="aCode" value="#{frequencyMB.code}"/>
                
                <p:separator/>
                <p:commandButton value="Inserir" icon="ui-icon-check" update=":activityForm"
                                 action="#{frequencyMB.addActivity()}"/>
                <p:commandButton value="Cancelar" onclick="activityD.hide()"/>
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">
            /* <![CDATA[ */
            function handleSubmitRequest(xhr, status, args) {
                if(!args.validationFailed) { 
                    replacement.hide();
                }
            }
            function change_color_in(celula){
                celula.style.backgroundColor="paleturquoise";
            }
            function change_color_out(celula){
                celula.style.backgroundColor="white";
            }
            function tableFinalize(){
                dias = new Object();
                for(i = 0; i < $('.day').length; i++){
                        if(isNaN(dias[$('.day:eq('+i+')').text()])){
                                dias[$('.day:eq('+i+')').text()] = 0;
                                console.log(i+" "+dias[$('.day:eq('+i+')').text()]);
                        }else{
                                dias[$('.day:eq('+i+')').text()]++;
                                $('.day:eq('+(i-1)+')').attr('colspan',dias[$('.day:eq('+i+')').text()]+1);
                                $('.day:eq('+i+')').remove();
                                console.log(i+" "+dias[$('.day:eq('+i+')').text()]);
                        }
                }
            }
            /* ]]> */
        </script>
    </ui:define>
</ui:composition>